<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写公司信息</title>
    <script src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/loading.css"/>
    <style>
        input {
            display: block;
            width: 80%;
            height: 40px;
            line-height: 100%;
            font-size: 18px;
            padding-left: 20px;
            outline: none;
            margin-top: 10px;
            margin-bottom: 10px;
            border: 1px solid #cccccc;
            border-collapse: inherit;
        }

        input:focus {
            border: 1px solid #11a984;
            border-collapse: inherit;
        }

        select {
            display: block;
            width: 80%;
            height: 40px;
            line-height: 100%;
            font-size: 18px;
            padding-left: 20px;
            margin-top: 10px;
            outline: none;
            margin-bottom: 10px;
            border: 1px solid #cccccc;
            border-collapse: inherit;
        }

        select:focus {
            border: 1px solid #11a984;
            border-collapse: inherit;
        }

        input, select {
            box-sizing: border-box;
        }

        span {
            font-weight: normal;
            font-size: 12px;
            color: #777777;
        }

        #push-button {
            color: white;
            background: #00b38a;
            width: 80%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-top: 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        #push-button:hover {
            background: #11a984;
        }
    </style>
</head>
<body>

<img src="drawable/logo.png" alt="" width="152" height="46" style="margin: 20px;display: block">
<h1 style="color: #777777;margin:10px auto;text-align: center">填写公司信息</h1>

<ul style="margin: 50px auto;width: 40%">
    <li>
        <span style="display: block">公司名称：</span>
        <input id="compName" type="text">
    </li>
    <li>
        <span style="display: block">创建时间：</span>
        <input id="compCreate" type="date">
    </li>
    <li>
        <span style="display: block">公司规模：</span>
        <input id="scope" type="text">
    </li>
    <li>
        <span style="display: block">官方网址：</span>
        <input id="link" type="text">
    </li>
    <li>
        <span style="display: block">公司描述：</span>
        <input id="desction" type="text">
    </li>
    <h4 id="push-button" onclick="pushJob()">提&nbsp交</h4>
</ul>

<div id="loading"
     style="position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 5;display: none;top:0">
    <section class="main">
        <!-- the component-->
        <ul class="bokeh">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</div>

<script type="text/javascript">
    /**
     * 提交信息
     */
    function pushJob() {
        loading(false);
        $.ajax({
            type: "POST",
            url: "/home",
            contentType: "application/json;charset:utf-8",
            data: JSON.stringify(createJsonParam()),
            dataType: "json",
            success: function (data) {
                loading(true);
                if (data.code == 0) {
                    window.location = "companyManager.html";
                } else {
                    alert("发布失败！");
                }
            }, error: function (message) {
                loading(true);
                alert(message);
            }
        })
    }

    function createJsonParam() {
        var json = {
            "param": "addCompany",
            "compName": $('#compName').val(),
            "compCreate": $('#compCreate').val(),
            "scope": $('#scope').val(),
            "desction": $('#desction').val(),
            "link": $('#link').val(),
        }
        return json;
    }

    /**
     * 隐藏显示加载框
     */
    function loading(hide) {
        if (hide) {
            $("#loading").css("display", "none");
        } else {
            $("#loading").css("display", "block");
        }
    }
</script>
</body>
</html>